<template>
    <div class="tabbar">
<ul>
    <li v-for="(item,index) in routerList":key="index"@click="switchTab(item.path)">
<span :class='route.path.includes(item.path) ? "active" : "" '>{{ item.title}}</span>
    </li>
</ul>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
let router=useRouter()
let route=useRoute()
const routerList=ref([
    {title:'首页',path:'/home'},
    {title:'商城',path:'/shooping'},
    {title:'购物车',path:'/live'},
    {title:'我的',path:'/my'}
])
//跳转
const switchTab=(path)=>{
    router.replace(path)
}
</script>

<style scoped>
.tabbar{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: 1.25rem;
    background-color: white;
    text-align: center;
  
 
}
.tabbar ul  {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    border-top: 1px solid rgb(226, 226, 226);
    
}
.tabbear ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.tabber ul li span{
    font-size: 0.45rem;
    /* color: rgb(102, 102, 102); */
}
.active{
color: rgb(254, 99, 3);
}
</style>